<template>
  <div>
    <main-layout>
      <div class="plantDetailBox" style="width:100%;">
        <div class="topBtnBox">
          <div class="myBtn comfirmBtn"  v-if="activeName==1" v-print="printHtml"  @click="btnPrint">
              <el-icon :size="18" style="margin-right:5px;"><printer /></el-icon> 打印
          </div>
          <div class="myBtn comfirmBtn" v-if="un_confirm_tasts.length>0&&activeName==1" @click="confirm">
              <el-icon :size="18" style="margin-right:5px;"><CircleCheck /></el-icon> 批量确认
          </div>
          <div class="myBtn" @click="close">
            <img src="/src/assets/back.png" alt="">
            返回
          </div>
        </div>

        <el-tabs v-model="activeName" type="card" class="plan-tabs">
          <el-tab-pane label="详情" name="1">
            <!-- <span slot="label"><el-icon color="#48b27a" :size="16"><CirclePlus /></el-icon>详情</span> -->
            <div id="printHtmlId" ref="printRef">
              <plant-detail v-loading="loading" 
              v-if="activeName==1 && details.plantingPlanId" 
               :stages="stages"
               :printType="printType" 
               :details="details" 
               :fn="get_plant_detail" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="日志" name="2">
             <plant-log v-if="activeName==2" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </main-layout>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import mainLayout from '@/components/custom/mainLayout.vue'
import plantDetail from './components/plantDetail.vue'
import plantLog from './components/plantLog.vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/pinia/modules/user'
import { getPlantDetail, getStageList, get_plant_batch_confirm } from '@/api/plant'
import { emitter } from '@/utils/bus.js'
import { ElMessageBox } from 'element-plus'
import { message } from '@/utils/element'
import delImg from '@/assets/warning.png'
import { VXETable } from 'vxe-table'

const router = useRouter()
const route = useRouter()
const userStore = useUserStore()
const printRef = ref(null)
const plantHeaderId = ref('')
const details = ref({})
const activeName = ref('1')
const stages = ref([])
const loading = ref(true)
const un_confirm_tasts = ref([]) // 未确认的任务行数据(只存储计划行id)
const backRefresh = ref(false) // 返回是否刷新页面
const printHtml = ref({
  id: "printHtmlId", // 打印的区域
  preview: false, // 预览工具是否启用
  previewTitle: '种植计划', // 预览页面的标题
  popTitle: '', // 打印页面的页眉
})
const printType = ref(false) // 返回是否刷新页面

onMounted(async() => {
  plantHeaderId.value = route.currentRoute.value.query.plantHeaderId
  // 获取种植阶段
  const res = await getStageList({ page: 1, limit: 100 })
  if (res.success) {
    stages.value = res.data
  }

  // 种植计划详情
  get_plant_detail()
})
const get_plant_detail = () => {
  un_confirm_tasts.value = []
  getPlantDetail(plantHeaderId.value).then(async res => {
    if (res.success) {
      loading.value = false
      details.value = res.data      
      details.value.tancStageRspList.forEach(max => {
        max.tancPlantingPlanTaskRspList?.forEach(item => {
          if (item.taskStatus ==1) {
            un_confirm_tasts.value.push(plantHeaderId.value)
          }
        })
      })
    }
  })
}
const close = () => {
  router.push(`/manage/plan/list`)
  backRefresh.value && emitter.emit('reload') // 刷新页面
  // emitter.emit('closeThisPage')
}
const btnPrint =()=>{
 printType.value = true
 setTimeout(() => {
    printType.value = false
 }, 1000);

}
const confirm = () => {
  ElMessageBox.confirm(`<div style="height:200px;width:100%;background-color:#f7f7f7;text-align: center;">
      <img style="padding:40px 0 0 0;height:40px" src="${delImg}" />
     <div style="font-size: 16px;text-align: center;padding: 10px;font-weight: 600;">确认方案吗?</div>
     <div style="font-size: 14px;text-align: center;color:#666">确认方案后系统生成农事</div>
     </div>`, '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      cancelButtonClass: 'cancelButtonClass',
      confirmButtonClass: 'confirmButtonClass',
      dangerouslyUseHTMLString: true,
      type: 'none',
    }
  ).then(async() => {
    const res = await get_plant_batch_confirm(un_confirm_tasts.value)
    if (res.code === 0 || res.success) {
      message('操作成功', 2)
      get_plant_detail()
      backRefresh.value = true
    } else {
      message(res.message || '出错了', 3)
    }
  })
}

</script>

<style lang="scss" scoped>
.plantDetailBox{
    position: relative;
    z-index: 10;
    margin: 0;
    .topBtnBox{
      display: flex;
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
    }
}
.myBtn{
      display: flex;
      align-items: center;
      justify-content: center;
      // position:absolute;
      // right:0;
      // top: 0;
      height: 100%;
      color:#333;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      padding: 0;
      box-sizing: border-box;
      height: 38px;
      width: 100px;
      border-radius: 2px;
      border: 1px solid #DDDDDD;
      &.comfirmBtn{
        right:100px;
        background-color: #04AE70;
        color: #fff;
        border: 1px solid #04AE70;
        &:hover{
          cursor: pointer;
          background-color: #049a63;
          color: #fff;
        }
      }
      &:hover{
        cursor: pointer;
        background-color: #00AF7010;
        color: #25B983;
      }
      img{
        display: block;
        height: 14px;
        margin: 0 10px 0 0;
      }
      &+.myBtn{
        margin-left: 10px;
      }
    }
</style>
<style lang="scss">
.plan-tabs{
  .el-tabs__header{
    box-sizing: border-box;
    height: 42px;
    background: rgba(0, 175, 112,0.06);
    border: 0;
    .el-tabs__nav{
      display: flex;
      border: 0;
      .el-tabs__item{
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        height: 42px;
        width: 90px;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #666666;
        background: #F7F7F7;
        // &::before{
        //   display: block;
        //   content: '';
        //   width: 18px;
        //   height: 18px;
        //   background: url("./images/pdt1.png") center center no-repeat;
        //   background-size: 14px 14px;
        //   margin: 0 5px 0 0;
        // }
        &.is-active{
          background: #04AE70;
          color: #fff;
        }
        // &+.el-tabs__item{
        //   &::before{
        //     background-image: url("./images/pdt2.png");
        //   }
          
        // }
      }
    }
    
  }
}
</style>
